{% extends "panel/panel_base.html" %}
{% load truncate_filters %}
{% block extra_head %}
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/metadata.js"></script>
<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#messageTable").tablesorter(); 
    } 
);
</script>
{% endblock %}
{% block panel_title%}Messages:{% endblock %}
{% block panel_content %}
	<div id="message_control">
		<ul>
			<li><a href="http://fblaconnection.com/panel/{{user.username}}/messages/send/">Send a Message</a></li>
			<li><a href="http://fblaconnection.com/panel/{{user.username}}/messages/recieved/">Recieved Messages</a></li>
			<li><a href="http://fblaconnection.com/panel/{{user.username}}/messages/sent/">Sent Messages</a></li>
		</ul>
	</div>
	{% if message %}
	<div id="message_box">
		<table width="600" border="0" cellspacing="1" cellpadding="0" id="messageTable" class="message">
		<thead>
		  <tr>
		    <th class="header" width="100" align="left">Sent To</th>
		    <th class="header" align="left">Subject</th>
			<th class="header" width="100" align="left">Date Sent</th>
		  </tr>
		</thead> 
		<tbody> 
		{% for m in message %}
			<tr class="{% cycle 'odd' 'even' %}">
			    <td align="left"><a href="http://fblaconnection.com/panel/{{m.sender}}/userp/">{{m.reciever|capfirst}}</a></td>
			    <td align="left"><a href="http://fblaconnection.com/panel/{{user.username}}/messages/view/{{m.id}}/">{{m.subject|truncate_chars:30}}</a></td>
				<td align="left">{{m.date_sent|date}}</td>
			  </tr>
		{% endfor %}
		</tbody> 
		</table>
	</div>
	{% else %}
		You have not sent any messages.
	{% endif %}
{% endblock %}